<html>
<head>
<link rel=StyleSheet href="style.css" type="text/css"/>
<script type="text/javascript" src="js/jquery-1.6.2.min.js"></script>

<script type="text/javascript">
$(document).ready(function() {
	$("#fred").blur(function() {
	    var regex = /^a$/;
	    if (!(regex.test($('#fred').val()))) {
		$('#frederror').text('that is not the letter A!');
	    };
	});
});
</script>
</head>
<body>
	<form>
		<div class="form">
			<div class="form-title">Personal details</div>
			<div class="form-description">
				Please complete the form below. Mandatory fields marked <em>*</em>
			</div>
			<div class="sequence">
				<div class="item">
					<div class="item-number">1</div>
					<div class="item-label">
						First name <em>*</em>
					</div>
					<div class="item-input">
						<input id="fred" name="item-input-1" class="item-input-text" type="text"></input>
					</div>
					<div class="item-description" ></div>
					<div class="item-help" ></div>
					<div id="frederror" class="item-error" ></div>
				</div>
				<div class="item" id="person_last-name">
					<div class="item-number">2</div>
					<div class="item-label">
						Family name <em>*</em>
					</div>
					<div class="item-input">
						<input name="item-input-2" class="item-input-text" type="text"></input>
					</div>
					<div class="item-description" ></div>
					<div class="item-help" ></div>
					<div class="item-error" ></div>
				</div>
				<div class="item">
					<div class="item-number">3</div>
					<div class="item-input">
						<input name="item-input-3" class="item-input-text" type="checkbox">Have living children</input>
					</div>
					<div class="item-description" ></div>
					<div class="item-help" ></div>
					<div class="item-error" ></div>
				</div>
				<div class="sequence">
					<div class="sequence-number">4</div>
					<div class="sequence-label">Contact details</div>
					<div class="sequence-content">
						<div class="item">
							<div class="item-number">4.1</div>
							<div class="item-label">
								Email <em>*</em>
							</div>
							<div class="item-input">
								<input name="item-input-4-1" class="item-input-text" type="text"></input>
							</div>
							<div class="item-description"></div>
							<div class="item-help"></div>
							<div class="item-error"></div>
						</div>
						<div class="item">
							<div class="item-number">4.2</div>
							<div class="item-label">Mobile number</div>
							<div class="item-input">
								<input name="item-input-4-2" class="item-input-text" type="text"></input>
							</div>
							<div class="item-description"></div>
							<div class="item-help"></div>
							<div class="item-error"></div>
						</div>
					</div>
				</div>
				<div class="item">
					<div class="item-number">5</div>
					<div class="item-label">Address</div>
					<div class="item-input">
						<textarea name="item-input-5" class="item-input-long-text"></textarea>
					</div>
					<div class="item-description" ></div>
					<div class="item-help" ></div>
					<div class="item-error" ></div>
				</div>
			</div>
		</div>
		<input class="submit" type="submit" />
	</form>
</body>
</html>
<!-- 
	<div class="item">
						<div class="item-number">4.1</div>
						<div class="item-label">
							Email <em>*</em>
						</div>
						<div class="item-input">
							<input name="item-input-4-1" class="item-input-text" type="text"></input>
						</div>
						<div class="item-description" />
						<div class="item-help" />
						<div class="item-error" />
					</div>
					<div class="item">
						<div class="item-number">4.2</div>
						<div class="item-label">Mobile number</div>
						<div class="item-input">
							<input name="item-input-4-2" class="item-input-text" type="text"></input>
						</div>
						<div class="item-description" />
						<div class="item-help" />
						<div class="item-error" />
					</div>
 -->
